<template>
  <el-descriptions :column="3" border class="normalInfoDescription" title="求职信息">
    <template #extra>
      <el-button v-show="!modify" type="primary" @click="modify = true">编辑</el-button>
      <el-button v-show="modify" type="info" @click="modify = false">取消</el-button>
      <el-button v-show="modify" type="success" @click="updateResumeNormalInfo(normalInfo)">保存</el-button>
    </template>
    <el-descriptions-item label="工作年限">
      <span v-show="!modify">{{ normalInfo.workYear.length == 0 ? "未填写" : normalInfo.workYear + '年' }}</span>
      <el-input-number v-show="modify" v-model="normalInfo.workYear" class="input"/>
    </el-descriptions-item>
    <el-descriptions-item label="求职意向">
      <span v-show="!modify">{{ normalInfo.targetJob.length == 0 ? "未填写" : normalInfo.targetJob }}</span>
      <el-input v-show="modify" v-model="normalInfo.targetJob" class="input"/>
    </el-descriptions-item>
    <el-descriptions-item label="薪资要求(元)">
      <span v-show="!modify">{{ normalInfo.targetSalary == 0 ? "未填写" : normalInfo.targetSalary }}</span>
      <el-input-number v-show="modify" v-model="normalInfo.targetSalary" class="input"/>
    </el-descriptions-item>
    <el-descriptions-item :span="3" label="技能特长">
      <span v-show="!modify">{{ normalInfo.skills.length == 0 ? "未填写" : normalInfo.skills }}</span>
      <el-input v-show="modify" v-model="normalInfo.skills" class="input" type="textarea"/>
    </el-descriptions-item>
    <el-descriptions-item :span="3" label="荣誉证书">
      <span v-show="!modify">{{
          normalInfo.honoraryCertificate.length == 0 ? "未填写" : normalInfo.honoraryCertificate
        }}</span>
      <el-input v-show="modify" v-model="normalInfo.honoraryCertificate" class="input" type="textarea"/>
    </el-descriptions-item>
    <el-descriptions-item :span="3" label="兴趣爱好">
      <span v-show="!modify">{{ normalInfo.hobbies.length == 0 ? "未填写" : normalInfo.hobbies }}</span>
      <el-input v-show="modify" v-model="normalInfo.hobbies" class="input" type="textarea"/>
    </el-descriptions-item>
    <el-descriptions-item :span="3" label="自我评价">
      <span v-show="!modify">{{ normalInfo.selfEvaluation.length == 0 ? "未填写" : normalInfo.selfEvaluation }}</span>
      <el-input v-show="modify" v-model="normalInfo.selfEvaluation" class="input" type="textarea"/>
    </el-descriptions-item>
  </el-descriptions>
</template>

<script lang="ts" setup>
import {onMounted, reactive, ref} from "vue";
import type {ResponseInterface, ResumeNormalInfoInterface, StudentInterface} from "@/model/type";
import {getLatestResumeNormalInfoAPI, updateResumeNormalInfoAPI} from "@/api/ResumeAPI";
import {ElMessage} from "element-plus";

const student = reactive<StudentInterface>(JSON.parse(localStorage.getItem("user") || "null"))
const normalInfo = reactive<ResumeNormalInfoInterface>({
  hobbies: "",
  honoraryCertificate: "",
  id: "",
  selfEvaluation: "",
  skills: "",
  studentId: student.id,
  targetJob: "",
  targetSalary: 0,
  workYear: 0
})
const modify = ref<boolean>(false)

async function updateResumeNormalInfo(normalInfo: ResumeNormalInfoInterface) {
  const r: ResponseInterface = await updateResumeNormalInfoAPI(normalInfo, localStorage.getItem("token"))
  if (r.code == 200) {
    ElMessage.success("更新成功")
    modify.value = false
  }
}

onMounted(async () => {
  const r: ResponseInterface = await getLatestResumeNormalInfoAPI(localStorage.getItem("token"));
  if (r.code == 200) {
    Object.assign(normalInfo, r.data)
    localStorage.setItem("resumeId", normalInfo.id)
  }
})
</script>

<style scoped>
.normalInfoDescription {
  margin-top: 20px;
}

.input {
  width: 200px;
}
</style>
